<template>
	<div class="cloud-wrap">
		<div ref="cloudEl" class="cloud-box"></div>
	</div>
</template>

<style>
.cloud-wrap {
	width: 100%;
	height: 100%;
}

.cloud-box {
	width: 100%;
	height: 100%;
}
</style>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud'; // Ensure echarts-wordcloud is imported

export default {
	data() {
		return {
			regionCode: 'china',
			words: [],
			bgImg: 'base64格式, 底色为白色',
		}
	},
	created() {
		this.getData('china');
	},
	mounted() {
		// this.drawCloud(this.$refs.cloudEl, this.words);
	},
	methods: {
		getData(regionCode) {
			this.regionCode = regionCode;
			if (regionCode == "china" || regionCode == "100000") {
				this.$axios.get("/api/result/lastname").then((res) => {
					console.log("姓氏分布", res);
					if (res.code == 0) {
						let words = [];
						res.data.map((item) => {
							words.push({
								id: item.count,
								content: item.lastname,
							});
						})
						console.log("words", words);
						this.words = words;
						this.drawCloud(this.$refs.cloudEl, this.words);
					} else {
						this.$Message.warning(res.message);
					}
				});
			}
			else {
				this.$axios.get(`/api/result/lastname/${regionCode}`).then((res) => {
					console.log("姓氏分布", res);
					if (res.code == 0) {
						let words = [];
						res.data.map((item) => {
							words.push({
								id: item.count,
								content: item.lastname,
							});
						})
						console.log("words", words);
						this.words = words;
						this.drawCloud(this.$refs.cloudEl, this.words);
					} else {
						this.$Message.warning(res.message);
					}
				});
			}

		},
		drawCloud(wrapEl, data) {
			// let maskImage = new Image(); // Can be used for shape mask
			// maskImage.src = this.bgImg;
			const colors = [
				"#b3612f",
				"#009a44", "#0ba85f",
				"#015c31", "#01663c", "#477f58", "#477f58"
			];

			let list = data.map((item) => ({
				name: item.content,
				value: item.id
			}));

			if (list.length === 0) {
				list = [{ name: '无', value: 50 }];
			}

			let myChart = echarts.init(wrapEl);
			let option = {
				tooltip: {
					show: true,
					backgroundColor: "#f8faf7",
					borderColor: "#009a44",
					borderWidth: 1.5,
					textStyle: {
						color: "#233a18",
						fontSize: 20,
						fontFamily: "Microsoft YaHei"
					},
				},
				series: [
					{
						name: "姓氏",
						type: "wordCloud",
						data: list,
						// maskImage: maskImage, // Use image mask if needed
						keepAspect: false,
						sizeRange: [16, 200],
						rotationRange: [0, 0],
						drawOutOfBound: false,
						left: "center",
						top: "center",
						width: "96%",
						height: "90%",
						rotationRange: [-45, 45],
						rotationStep: 45,
						gridSize: 4,
						textPadding: 10,
						autoSize: {
							enable: true,
							minSize: 6,
						},
						textStyle: {
							fontFamily: 'Microsoft YaHei',
							color: function (params) {
								let i = params.dataIndex;
								let len = colors.length;
								return colors[i % len];
								// return "#015c31";
							},
						},
						// 鼠标移入效果
						emphasis: {
							textStyle: {
								textBorderColor: "#ccc",
								textBorderWidth: 2,
								textShadowColor: "#ccc",
								textShadowBlur: 8,
							},
						},
					},
				],
			};

			myChart.setOption(option, true);
		},
	}
}
</script>